<template>
	<view class="m-news">
		<!-- 关注h和话题导航头 -->
		<uniNavBar :border="false" :fixed="true" :statusBar="true" @clickRight="openAddInput()">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class="hauti font-md text-light-muted mx-1" @click="changeTab(index)" :class="tabindex===index?'text-main text-main':'font-md text-light-muted'"
				 v-for="(item,index) in tabList" :key="index">
					{{item.name}}
				</view>
			</view>
			<text slot="right" class="iconfont icon-fatie_icon"></text>
		</uniNavBar>

		<swiper :style="'height:'+ scrollH+'px;'" duration="500" :current="tabindex" @change="onChangeTab">
			<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y :style="'height:'+scrollH+'px;'" @scrolltolower="onloadmore">
					<block v-for="( item ,index) in list" :key="index">
						<common-list :item="item" :index="index" @onSupport="onSupport"></common-list>
						<!-- 全局分割线 -->
						<divider></divider>
					</block>
					<!-- 上啦加载更多 -->
					<loadmore :loadmore="loadmore"></loadmore>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y :style="'height:'+scrollH+'px;'">
					<!-- 热门分类 -->
					<hot-nav :data="hotCase"></hot-nav>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="bg-light rounded flex align-center justify-center py-2  text-secondary">
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮博图 -->
					<swiper class="swiper px-2 pb-2" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<image src="/static/demo/banner1.jpg" class="rounded w-100"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/demo/banner2.jpg"  class="rounded w-100"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/demo/banner3.jpg" class="rounded w-100"></image>
						</swiper-item>
					</swiper>
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">
						最近更新
					</view>
					<view v-for="(item,index) in topicList" :key="index">
						<topic-list :data="item"></topic-list>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	//测试数据
	var demoData = [{
			"username": "昵称",
			"userpic": "/static/default.jpg",
			"isFollow": true,
			"newstime": "2019-11-11 下午 4:30",
			"title": "我是标题",
			"titlepic": "/static/demo/datapic/1.jpg",
			"support": {
				"type": "",
				"support_count": 0,
				"unsupport_count": 0,
			},
			"comment_count": 0,
			"share_num": 0
		}, {
			"username": "昵称",
			"userpic": "/static/default.jpg",
			"isFollow": true,
			"newstime": "2019-11-11 下午 4:30",
			"title": "我是标题",
			"titlepic": "/static/demo/datapic/1.jpg",
			"support": {
				"type": "",
				"support_count": 0,
				"unsupport_count": 0,
			},
			"comment_count": 0,
			"share_num": 0
		},
		{
			"username": "昵称",
			"userpic": "/static/default.jpg",
			"isFollow": true,
			"newstime": "2019-11-11 下午 4:30",
			"title": "我是标题",
			"titlepic": "/static/demo/datapic/1.jpg",
			"support": {
				"type": "",
				"support_count": 0,
				"unsupport_count": 0,
			},
			"comment_count": 0,
			"share_num": 0
		}
	]
	//导入自定义导航栏
	import uniNavBar from "@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue" //自定义导航
	import commonList from "../../components/common/common-list.vue" //公共列表
	import divider from "@/components/common/divider.vue" //分割线
	import loadmore from '@/components/common/loadmore.vue' //加载更多
	import hotNav from '@/components/news/hot-nav/hot-nav.vue' //热门分类
	import topicList from '@/components/news/topic-list/topic-list.vue' //热门分类
	export default {
		name: "news",
		components: {
			commonList,
			uniNavBar,
			divider,
			loadmore,
			hotNav,
			topicList
		},
		data() {
			return {
				scrollH: 500,
				tabList: [{
					name: "关注"
				}, {
					name: "话题"
				}],
				tabindex: 0,

				//关注
				list: [],
				loadmore: "上拉加载更多",
				// 热门分类
				hotCase: [{
						name: "关注"
					},
					{
						name: "关注"
					},
					{
						name: "关注"
					},
				],
				//最近的更新
				topicList:[
					
					{
						cover:"/static/demo/topicpic/1.jpeg",
						title:"#话题名称#",
						desc:'话题描述：',
						today_count:23,
						news_count:3,
					},
					
					{
						cover:"/static/demo/topicpic/1.jpeg",
						title:"#话题名称#",
						desc:'话题描述：',
						today_count:23,
						news_count:3,
					},
					
					{
						cover:"/static/demo/topicpic/1.jpeg",
						title:"#话题名称#",
						desc:'话题描述：',
						today_count:23,
						news_count:3,
					},
					{
						cover:"/static/demo/topicpic/1.jpeg",
						title:"#话题名称#",
						desc:'话题描述：',
						today_count:23,
						news_count:3,
					}
				],
				
			}
		},

		onLoad() {
			uni.getSystemInfo({
				success: res => {
					// 滚动区域的高度= 视图高度-状态栏的高度-导航栏的高
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
				}
			})
			this.list = demoData
		},
		methods: {
			changeTab(index) {
				this.tabindex = index;
			},
			openAddInput() {
				// 去到发布页面
				uni.navigateTo({
					url: '../add-input/add-input',
				})
			},
			//滑动
			onChangeTab(e) {
				this.tabindex = e.detail.current
			},
			//点赞和踩赞
			onSupport(val, index) {
				let obj = this.list[index].support
				let msg = val.type == "support" ? "顶" : "踩"
				if (val === "support" && val !== obj.type) {
					if (obj.type == "") {
						obj.type = val;
						obj.support_count += 1;
					} else {
						obj.type = val;
						obj.support_count += 1;
						obj.unsupport_count -= 1;
					}

				} else if (val === "unsupport" && obj.type !== val) {
					if (obj.type == "") {
						obj.type = val;
						obj.unsupport_count += 1;
					} else {
						obj.type = val;
						obj.unsupport_count += 1;
						obj.support_count -= 1;
					}
				}
				uni.showToast({
					title: msg + "成功"
				})
			},
			onloadmore() {
				if (this.loadmore !== "上拉加载更多") return;
				this.loadmore = "加载中……";
				setTimeout(() => {
					this.list = [...this.list, ...demoData]
					this.loadmore = "上拉加载更多";
				}, 2000)
			}
		},
	}
</script>

<style>
</style>
